<template>
  <div class="bg">
    <div class="top">
      <div class="topContent">
        <div class="logo">EduPanda</div>
        <div class="logout" style="cursor: pointer" @click="logout">
          Log Out
        </div>
      </div>
    </div>
    <div class="topBar">
      <el-menu
        ellipsis
        class="el-menu-popper-demo"
        mode="horizontal"
        :popper-offset="6"
        style="
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
        active-text-color="#0077C2"
      >
        <el-sub-menu index="1" style="margin-left: 10%">
          <template #title>关于我们</template>
          <el-menu-item index="1-1">About Us</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>奖学金项目</template>
          <el-menu-item index="2-1">CSC</el-menu-item>
          <el-menu-item index="2-2">CIS</el-menu-item>
          <el-menu-item index="2-3">Govern</el-menu-item>
          <el-menu-item index="2-4">University</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>学历项目</template>
          <el-menu-item index="3-1">高中</el-menu-item>
          <el-menu-item index="3-2">本科</el-menu-item>
          <el-menu-item index="3-3">硕士</el-menu-item>
          <el-menu-item index="3-4">博士</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>非学历项目</template>
          <el-menu-item index="4-1">汉语言学习</el-menu-item>
          <el-menu-item index="4-2">夏令营/冬令营</el-menu-item>
          <el-menu-item index="4-3">游学项目</el-menu-item>
          <el-menu-item index="4-4">公司培训项目</el-menu-item>
          <el-menu-item index="4-5">来华教育展合作</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>来华服务</template>
          <el-menu-item index="5-1">签证延期</el-menu-item>
          <el-menu-item index="5-2">工作办理</el-menu-item>
          <el-menu-item index="5-3">租房服务</el-menu-item>
          <el-menu-item index="5-4">飞机接送</el-menu-item>
          <el-menu-item index="5-5">酒店预订</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="6">
          <template #title>汉语教育</template>
          <el-menu-item index="6-1">HSK培训</el-menu-item>
          <el-menu-item index="6-2">HSK考试预订</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="7" style="margin-right: 10%"
          >其他国家服务</el-menu-item
        >
      </el-menu>
    </div>
    <div class="swiper">
      <el-carousel style="height: 500px" height="500px" motion-blur>
        <el-carousel-item v-for="item in 4" :key="item">
          <h3 class="small justify-center" text="2xl">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="allServices">
      <div
        v-for="(service, index) in services"
        :key="service.name"
        :style="index % 4 == 0 ? 'marginRight:0px' : ''"
        @click="goDetail"
      >
        {{ service.name }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/stores/user";
const $router = useRouter();
const $route = useRoute();
const userStore = useUserStore();
let services = ref([
  { name: "最受欢迎项目" },
  { name: "本科" },
  { name: "硕士" },
  { name: "博士" },
  { name: "语言生" },
  { name: "冬夏令营" },
  { name: "HSK教育与考试" },
  { name: "签证延期" },
  { name: "飞机接送" },
  { name: "租房" },
  { name: "酒店预订" },
  { name: "来华旅游" },
  { name: "工作介绍" },
  { name: "外国公司来华培训" },
  { name: "教育展服务" },
  { name: "中介合作" },
]);
const logout = async () => {
  await userStore.userLogout();
  $router.replace({ path: "/login", query: { redirect: $route.path } });
};
const goDetail = () => {
  $router.push("detail");
};
</script>

<style scoped lang="scss">
.bg {
  width: 100vw;
  background-color: #f5f5f5;
  .top {
    width: 100%;
    background-color: #fff;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e3e3e3;
    .topContent {
      width: 80%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .topBar {
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    .topBarContent {
      width: 80%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      div {
        cursor: pointer;
      }
    }
  }
  .swiper {
    width: 100%;
  }
  .allServices {
    width: 80%;
    margin: 0 auto;
    margin-top: 40px;
    div {
      width: 24%;
      height: 200px;
      background-color: #cee8ff;
      float: left;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 1%;
      margin-bottom: 10px;
      transition: all 0.5s;
    }
    div:hover {
      filter: brightness(80%);
    }
  }
}
</style>

<style>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 500px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>